使用 Nginx 编译 Sass 和 Scss

前端的小伙伴对于 Sass 或 Scss（以下统称 Sass） 应该并不陌生，他是一种 CSS 预处理语言，使用 Sass 可以极大简化 CSS 代码的编写和维护。

通常情况下，我们在开发环境下使用 Sass 是在 webpack dev server 或者 Gulp 环境下，通过监听文件修改来实时编译 Sass 并输出 CSS 到浏览器。接下来，我想给大家介绍一种独辟蹊径的方式，那就是在开发环境下通过 Nginx 编译 Sass 并实时输出 CSS 到浏览器的方法。

下面简单介绍一下如何搭建环境：（如不想自己配置环境，文末提供了一个 Docker 镜像，可以一键搭建环境）

Nginx 设置

为了支持 Sass 的编译，我们需要 Nginx Lua module，也就是 openresty，安装方法可以参考官网: https://openresty.org/cn/inst... 或 https://github.com/openresty/... 。Ubuntu 系统可以直接通过 apt 包管理安装: apt install nginx libnginx-mod-http-lua

确保 Lua 模块安装好以后，我们还需要一些处理 Sass 的 Lua 脚本，可以从这里下载: https://github.com/hex-ci/doc... ，把代码解压缩到目录下，例如: /your/path/lua，然后我们来配置 nginx.conf:

http {
    # 其它配置....

    lua_package_path '/your/path/lua/?.lua;;';

    # 其它配置.....

    server {
        # 其它配置...

        location / {
            header_filter_by_lua_block {
                ngx.header.content_length = nil
                ngx.header.content_encoding = ""
            }

            body_filter_by_lua_file /your/path/lua/body.lua;

            try_files $uri $uri/ =404;
        }

        location ~ \.php$ {
            # 其它配置...

            header_filter_by_lua_block {
                ngx.header.content_length = nil
                ngx.header.content_encoding = ""
            }

            body_filter_by_lua_file /your/path/lua/body.lua;
        }

        location ~ ^.*\.scss$ {
            set $sass_output_style            expanded;
            set $sass_source_map_embed        on;
            set $sass_source_map_contents     on;
            set $sass_is_indented_syntax_src  off;

            content_by_lua_file /your/path/lua/resty/sass/autocompile.lua;
        }

        location ~ ^.*\.sass$ {
            set $sass_output_style            expanded;
            set $sass_source_map_embed        on;
            set $sass_source_map_contents     on;
            set $sass_is_indented_syntax_src  on;

            content_by_lua_file /your/path/lua/resty/sass/autocompile.lua;
        }

        # 其它配置...
    }
}

安装依赖

编译 Sass 还需要系统安装 libsass 和 lua-zlib，在 Ubuntu 下可以通过 apt 安装: apt install libsass-dev lua-zlib-dev

如需自己编译请参考 https://github.com/sass/libsass 和 https://github.com/brimworks/...

使用

经过以上配置，Nginx 将支持 .scss 和 .sass 文件的实时编译，也支持 .html、.php 等内联 Sass 的编译，例如：

<style type="text/scss">
.demo-1 {
   color: red;

  .demo-1-1 {
     color: blue;
  }
}
</style>

<style type="text/sass">
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none
</style>

Docker 镜像

为便于环境的搭建，制作了一个 Docker 镜像，可以很方便的搭建支持 Sass 的 Nginx。

镜像 github: https://github.com/hex-ci/doc...

启动容器：docker run --name your-name -v /your/html/path:/usr/share/nginx/html -p your-port:80 -d codeigniter/nginx-lua-sass:3

使用自定义配置启动容器: docker run --name your-name -v /your/html/path:/usr/share/nginx/html -v /your/path/default.conf:/etc/nginx/conf.d/default.conf -p your-port:80 -d codeigniter/nginx-lua-sass:3

最后，欢迎与大家多多交流有意思的技术~谢谢~